<form
    class="paymentsModal-container pm_modal {{::ctrl.class}}"
    ng-class="{
        'paymentsModal-enough-credit': !ctrl.valid.AmountDue,
        'paymentsModal-method-paypal': ctrl.method.value === 'paypal',
        'paymentsModal-method-card': ctrl.method.value === 'card',
        'paymentsModal-method-bitcoin': ctrl.method.value === 'bitcoin',
        'paymentsModal-method-cash': ctrl.method.value === 'cash',
        'paymentsModal-step-pay': ctrl.step === 'payment',
        'paymentsModal-step-process': ctrl.step === 'process',
        'paymentsModal-step-thanks': ctrl.step === 'thanks'
    }"
    name="paymentsModalForm"
    role="dialog"
    novalidate
    ng-submit="paymentsModalForm.$valid && ctrl.submit()">

    <div class="modal-dialog" id="paymentsModal">
        <button
            type="button"
            ng-click="ctrl.cancel()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action"
            class="fa fa-times close"></button>

        <div class="modal-content">
            <header class="modal-header">
                <h4 class="modal-title paymentsModal-title" translate translate-context="Title">Payment</h4>
            </header>

            <payment-form
                data-form="paymentsModalForm"
                data-ctrl="ctrl"
                class="modal-body paymentsModal-paymentForm"></payment-form>

            <div class="modal-body text-center paymentsModal-process">
                <p>&nbsp;</p>
                <p class="alert alert-info" translate translate-context="Info">You're upgrading your account. Once we successfully process payment, we'll immediately upgrade your account. Thanks for choosing to become a paying customer!</p>
                <p>&nbsp;</p>
                <p translate translate-context="Info">Your account is being updated, this may take up to 30 seconds.</p>
                <p>&nbsp;</p>
                <loader-tag></loader-tag>
            </div>

            <div class="modal-body text-center paymentsModal-thanks">
                <h3 translate translate-context="Title">Thank you for your subscription!</h3>
                <p translate translate-context="Info">Your new features are now available.</p>
                <p><strong translate translate-context="Info payment">Start customizing!</strong></p>
                <features-list data-ctrl="ctrl"></features-list>
            </div>

        </div>

        <div class="modal-footer paymentsModal-group-btn">
            <button
                type="button"
                class="pm_button modal-footer-button paymentsModal-btn-cancel"
                ng-click="ctrl.cancel()"
                translate
                translate-context="Action">Cancel</button>
            <button
                type="button"
                class="pm_button modal-footer-button paymentsModal-btn-close"
                ng-click="ctrl.cancel()"
                translate
                translate-context="Action">Close</button>
            <button
                type="submit"
                class="pm_button primary modal-footer-button paymentsModal-btn-submit">
                <span ng-if="ctrl.method.value !== 'card'" translate-context="Action" translate>Submit</span>
                <span ng-if="ctrl.method.value === 'card'" translate-context="Action" translate>Continue</span>
            </button>
        </div>

    </div>

    <div class="modal-overlay"></div>
</form>
